<template>
<div class="orderCount">
   <div class="orderCount_span"><span>订单统计</span></div>
   <div class="orderCount_span_title">
     <span>订单完成率</span>
     <span>有效订单</span>
     <span>订单总数</span>
       </div>
<div class="orderCount_span_title_math">
     <span>{{(orderCompletionRate*100).toFixed(2)}}%</span>
     <span style="padding-left:50px">{{validOrderCount}}</span>
     <span style="padding-left:60px">{{totalOrderCount}}</span>
  </div>

  <div class="orderCount_data"></div>
   <div class="orderCount_price">

    <span style="padding-left:10px" class="iconfont icon-tubiao-duanhengxian" >订单总数<span>{{totalOrderCount}}</span>(个)</span>
    <span class="iconfont icon-tubiao-duanhengxian1">有效订单数<span>{{validOrderCount}}</span>(个)</span>

     </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Bus from '@/utils/EventBus'
export default {
  name: 'orderCountIndex',
  data () {
    return {
      dateList: [],
      orderCompletionRate: 1, // 订单完成率
      orderCountList: [], // 总订单数列表
      totalOrderCount: 0, // 总订单数
      validOrderCount: 0, // 有效订单数
      validOrderCountList: [] // 有效订单数列表

    }
  },
  created () {
    Bus.$on('orderCount', (orderCountdata) => {
      console.log(orderCountdata, 'orderCountdata')
      this.dateList = orderCountdata.dateList.split(',')
      this.orderCompletionRate = orderCountdata.orderCompletionRate
      this.orderCountList = orderCountdata.orderCountList.split(',')
      this.totalOrderCount = orderCountdata.totalOrderCount
      this.validOrderCount = orderCountdata.validOrderCount
      this.validOrderCountList = orderCountdata.validOrderCountList.split(',')
      this.orderCount()
    })
  },

  mounted () {

  },
  methods: {
    orderCount () {
      const chartDom = document.querySelector('.orderCount_data')

      const myChart = echarts.init(chartDom)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })

      const option = {
        tooltip: {
          trigger: 'axis',
          borderColor: 'rgba(255,255,255,0.5)', // 设置边框颜色为半透明白色
          borderStyle: 'dashed', // 设置边框为虚线
          borderWidth: 1 // 设置边框宽度
        // 其他 tooltip 配置...
        },
        xAxis: {
          type: 'category',
          data: this.dateList,
          axisLabel: {
            // fontSize: 20 // 这里设置 X 轴刻度的字体大小
            // 刻度标签与轴线之间的距离

          },
          axisTick: {
            // 控制轴刻度的显示与否
            show: false
          }

        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.orderCountList,
            type: 'line',
            lineStyle: {
              color: 'rgb(241,224,152)' // 这里改成你想要的颜色
            }

          },
          // 第二条线
          {
            data: this.validOrderCountList,
            type: 'line',
            lineStyle: {
              color: 'pink' // 这里改成你想要的颜色
            },
            smooth: true // 可选，是否平滑曲线
          }

        ]
      }

      option && myChart.setOption(option)
    }
  }

}
</script>

<style lang="less" scoped>
.orderCount{
   margin-top: 20px;
  background-color: white;

 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);

}
.orderCount_data{
  width: 580px;
  height: 500px;
}
.orderCount_span{
  padding-top: 20px;
  span{
    padding-left: 20px;
    font-size: 20px;
    font-weight:600;
       }
}
.orderCount_price{

   margin-top:-35px;
   padding-bottom:30px;
   text-align: center;
}
.orderCount_span_title{
  padding-left: 10px;
 padding-top: 10px;
 padding-bottom: 10px;
  span{

    font-size: 12px;

    margin:14px;

  }
}
.orderCount_span_title_math{
 padding-left: 27px;
  span{

    font-weight:600;

  }
}
</style>
